<!DOCTYPE html>
<html>

<head>

  <!-- 页面meta -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>贫困种类管理</title>

  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

  <!-- 引入样式 -->

  <link rel="stylesheet" href="../plugins/elementui/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

  <div class="content-header">

    <h1>贫困种类管理</h1>

  </div>

  <div class="app-container">

    <div class="box">

      <div class="filter-container">

        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

      </div>

      <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

        <el-table-column type="index" align="center" label="序号"></el-table-column>

        <el-table-column prop="poorKind" label="贫困种类" align="center"></el-table-column>

        <el-table-column label="操作" align="center">

          <template slot-scope="scope">

            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

          </template>

        </el-table-column>

      </el-table>

      <!-- 新增标签弹层 -->

      <div class="add-form">

        <el-dialog title="新增贫困种类" :visible.sync="dialogFormVisible">

          <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">


            <el-row>

              <el-col :span="24">

                <el-form-item label="贫困种类">

                  <el-input v-model="formData.poorKind" type="poor"></el-input>

                </el-form-item>

              </el-col>

            </el-row>

          </el-form>

          <div slot="footer" class="dialog-footer">

            <el-button @click="dialogFormVisible = false">取消</el-button>

            <el-button type="primary" @click="handleAdd()">确定</el-button>

          </div>

        </el-dialog>

      </div>

      <!-- 编辑标签弹层 -->

      <div class="add-form">

        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

          <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">


            <el-row>

              <el-col :span="24">

                <el-form-item label="贫困种类">

                  <el-input v-model="formData.poorKind" type="poor"></el-input>

                </el-form-item>

              </el-col>

            </el-row>

          </el-form>

          <div slot="footer" class="dialog-footer">

            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>

            <el-button type="primary" @click="handleEdit()">确定</el-button>

          </div>

        </el-dialog>

      </div>

    </div>

  </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
  var vue = new Vue({

    el: '#app',
    data:{
      pagination: {},
      dataList: [],//当前页要展示的列表数据
      formData: {},//表单数据
      dialogFormVisible: false,//控制表单是否可见
      dialogFormVisible4Edit:false,//编辑表单是否可见
    },

    //钩子函数，VUE对象初始化完成后自动执行
    created() {
      this.getAll();
    },

    methods: {
      //列表
      getAll() {
        //发送ajax请求
        axios.get("http://localhost:8080/manages/poor").then((res)=>{
          this.dataList = res.data.data;

        });
      },

      //弹出添加窗口
      handleCreate() {
        this.dialogFormVisible = true;
        this.resetForm();
      },

      //重置表单
      resetForm() {
        this.formData = {};
      },

      //添加
      handleAdd () {
        //发送ajax请求
        axios.post("http://localhost:8080/manages/poor",this.formData).then((res)=>{
          console.log(res.data);
          //如果操作成功，关闭弹层，显示数据
          if(res.data.code == 20041){
            this.dialogFormVisible = false;
            this.$message.success("添加成功");
          }else if(res.data.code == 20040){
            this.$message.error("添加失败");
          }else{
            this.$message.error(res.date.message);
          }
        }).finally(()=>{
          this.getAll();
        });
      },

      //弹出编辑窗口
      handleUpdate(row) {
        this.formData = row;
        this.dialogFormVisible4Edit = true;
      },

      //编辑
      handleEdit() {
        //发送ajax请求
        axios.put("http://localhost:8080/manages/poor",this.formData).then((res)=>{
          //如果操作成功，关闭弹层，显示数据
          if(res.data.code == 20021){
            this.dialogFormVisible4Edit = false;
            this.$message.success("修改成功");
          }else if(res.data.code == 20020){
            this.$message.error("修改失败");
          }else{
            this.$message.error();
          }
        }).finally(()=>{
          this.getAll();
        });
      },

      // 删除
      handleDelete(row) {
        //1.弹出提示框
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'
        }).then(()=>{
          //2.做删除业务
          axios.delete("http://localhost:8080/manages/poor/"+row.id).then((res)=>{
            if(res.data.code == 20031){
              this.$message.success("删除成功");
            }else{
              this.$message.error("删除失败");
            }
          }).finally(()=>{
            this.getAll();
          });
        }).catch(()=>{
          //3.取消删除
          this.$message.info("取消删除操作");
        });
      }
    }
  })



</script>

</html>